{% extends "./inc_base.html" %}
{% block content %}

<header id="header" class="mui-bar mui-bar-transparent">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <!--<span class="mui-icon iconfont icon-cart"><span class="mui-badge">9</span></span>-->
    <h1 class="mui-title"><img src="/static/mobile/img/logo.png" ></h1>
    <span class="mui-icon iconfont icon-search mui-pull-right"></span>
</header>
<nav class="mui-bar mui-bar-tab">
    <a class="mui-tab-item mui-action-back" >
        <span class="mui-icon iconfont icon-back"></span>
        <span class="mui-tab-label">返回</span>
    </a>
    <a class="mui-tab-item" href="#SOHUCS">
        <span class="mui-icon iconfont icon-comment"><span class="mui-badge" id="changyan_count_unit">0</span></span>
        <span class="mui-tab-label">评论</span>
    </a>
    <a class="mui-tab-item" href="#shoucang">
        <span class="mui-icon iconfont icon-favor"></span>
        <span class="mui-tab-label">收藏</span>
    </a>
    <a class="mui-tab-item" href="#fenxiang">
        <span class="mui-icon iconfont icon-share"></span>
        <span class="mui-tab-label">分享</span>
    </a>

    {% if controller.is_login %}
    <a class="mui-tab-item" href="/center/index">
        <span class="mui-icon iconfont icon-my"></span>
        <span class="mui-tab-label">我的</span>
    </a>
    {%else%}
    <a class="mui-tab-item" href="/center/public/login">
        <span class="mui-icon iconfont icon-myfill"></span>
        <span class="mui-tab-label">登录</span>
    </a>
    {%endif%}

    <a class="mui-tab-item" href="#top">
        <span class="mui-icon iconfont icon-top"></span>
        <span class="mui-tab-label">顶部</span>
    </a>

</nav>
<div class="mui-content detail" >
    {{HOOK@videoPlayer|safe}}
    <ul id="list" class="mui-table-view mui-table-view-chevron">
        <li class="mui-table-view-cell ">

            {{pinfo.title}}
            <span class="mui-badge">更新至 <em class="text-danger">{{lastlevel.level}}</em> 集</span>
        </li>
        <li class="mui-table-view-divider">正在播放:{%if info.level== 0%} {{lastlevel.title}} {%else%} {{info.title}}{%endif%}</li>
        <li class="mui-table-view-cell mui-collapse">
            <a class="mui-navigate-right" href="#">
                播放列表
            </a>
            <ul class="mui-table-view mui-table-view-chevron">
                {%for val in plist%}
                <li class="mui-table-view-cell mui-media mui-media-icon">
                    <a class="mui-navigate-right"  href="{{val.name|get_url(val.id)}}">
                        <div class="mui-media-object mui-pull-left"><span class="mui-icon iconfont {%if info.id == val.id%}icon-videofill{%else%}icon-video{%endif%}"></span>
                        </div>
                        <div class="mui-media-body">
                            {{val.title}}
                            <span class="mui-badge">{{val.level}}</span>
                        </div>
                    </a>
                </li>
                {%endfor%}
            </ul>
        </li>
    </ul>
    {{HOOK@documentDetailAfter|safe}}

</div>
{% endblock%}

{% block script %}
<script type="text/javascript">
    mui.init();
    var btn = document.querySelectorAll(".mui-bar-tab a.mui-tab-item");
    for(var i = 0;i<btn.length;i++){
        btn[i].addEventListener("tap",function () {
            var href = this.getAttribute("href");
            if(href=="#top"){
                mui.scrollTo(0,500);
            }else if(href=="#shoucang"){
                //todo
                mui.toast("功能开发中。。。")
                return
            }else if(href=="#fenxiang"){
                //todo
                mui.toast("功能开发中。。。")
                return
            }else {
                mui.openWindow({url: href})
            }

        })
    }

</script>
{% endblock %}